<template>

  <el-main style="height: 930px;">

    <div style="margin: 10px 0">
      <el-date-picker
        v-model="selectDate"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <template>
        <el-select v-model="type" placeholder="请选择状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-input style="width: 200px" placeholder="请输入目的库房名称" suffix-icon="el-icon-position" class="ml-5" v-model="warehouseName"></el-input>
      <el-input style="width: 200px" placeholder="请输入商品名" suffix-icon="el-icon-position" class="ml-5" v-model="selectCargoName"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>


    <div>
      <el-table
        :data="outBillTableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="单号" width="120"></el-table-column>
        <el-table-column prop="warehouseName" label="库房名称" width="120"></el-table-column>
        <el-table-column prop="missionID" label="任务号" width="120"></el-table-column>
        <el-table-column prop="quantities" label="商品数量统计" width="120"></el-table-column>
        <el-table-column prop="totalPrice" label="总金额" width="120"></el-table-column>
        <el-table-column prop="stage" label="状态" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.stage == '0'">出库</span>
            <span v-if="scope.row.stage == '1'">入库</span>

          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="200"></el-table-column>
        <el-table-column label="操作"   align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="chosenOutBillShow(scope.$index, scope.row)">查看商品详情<i class="el-icon-edit"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="outTotal">
      </el-pagination>
    </div>


    <el-dialog title="展示商品详情" :visible.sync="showCargoDescriptionDialogVisible">
      <el-table :data="cargoTableData">
        <el-table-column property="id" label="商品编号" width="200"></el-table-column>
        <el-table-column property="cargoName" label="商品名称" width="200"></el-table-column>
        <el-table-column property="price" label="售价" width="200"></el-table-column>
        <el-table-column property="provider" label="厂商"></el-table-column>
      </el-table>
    </el-dialog>

  </el-main>

</template>

<script>
import axios from "axios";
export default{
  name: 'OutBill',
  data(){
    return {
      options: [
        {
          value: '0',
          label: '出库'
        }, {
          value: '1',
          label: '入库'
        }],
      outBillTableData: [],
      cargoTableData: [],
      outTotal: 0,
      pageNum: 1,
      pageSize: 10,
      selectDate:["",""],
      type:"",
      selectCargoName:"",
      warehouseName:"",
      loading:false,
      showCargoDescriptionDialogVisible:false,
      multipleSelection: [],
      resData:{}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      axios.post("http://127.0.0.1:8080/test/exImportBill/getAllExImportPage", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        from: this.selectDate[0],
        to:this.selectDate[1],
        type:this.type,
        warehouseName:this.warehouseName,
        cargoName:this.selectCargoName,
      }).then(res => {
        console.log(res);
        this.outBillTableData = res.data.data.list;
        this.resData = res.data;
        this.outTotal = res.data.data.total;
      })
    },

    reset() {
      this.selectDate[0] = ""
      this.selectDate[1] = ""
      this.type = ""
      this.warehouseName = ""
      this.selectCargoName = ""
      this.load()
    },

    chosenOutBillShow(index, row){
      this.cargoTableData = this.resData.data.list[index].list;
      this.showCargoDescriptionDialogVisible = true;

    },

    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
  }
}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>

